<style scoped>
  .red {
    color: red;
  }

  .font-big {
    font-size: 30px;
  }
</style>

<template>
  <div>
    <p>ClassDemo</p>

    <!-- 1、Class类 -->
    <!-- 纯class -->
    <div>Name: <span class="red font-big">Aaron</span></div>

    <!-- 字符串 -->
    <div>Name: <span :class="true ? 'red font-big' : ''">Aaron</span></div>

    <!-- 对象 {cls1: true, cls2: false} -->
    <div>Name: <span :class="{'red': isRed, 'font-big': isBig}">Aaron</span></div>

    <!-- 数组 [cls1, cls2] -->
    <div>Name: <span :class="['red', 'font-big']">Aaron</span></div>

    <!-- 数组中包裹对象（终极方案） [{cls1: activeClass}, cls2}] -->
    <div>Name: <span :class="[{'red': isRed, 'font-big': isBig}]">Aaron</span></div>

    <!-- 2、style样式 -->
    <!-- 纯style -->
    <p style="color:red;font-size:30px;"></p>

    <!-- 对象 {color: xxx, fontSize: xx} 转换为驼峰式 --> 
    <p :style="styleData">Shanghai</p>

    <!-- 数组 [styleData1, styleData2] 转换为驼峰式 --> 
    <!-- 适合多个样式对象 -->
    <p :style="[styleData, styleData2]">Shanghai</p>

    <!-- 当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖 -->
    <!-- 详见 https://cn.vuejs.org/v2/guide/class-and-style.html -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBig: true,

      styleData: {
        fontSize: '30px', // 转换为驼峰式
        color: 'red',
      },
      styleData2: {
        backgroundColor: '#ccc' // 转换为驼峰式
      },
    }
  }
}
</script>